<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dialog = ref(null);
import utils from "@/common/utils/utils";
// 我的灵感库
import HotTextScript from "@/views/shotstack/HotTextScript/index.vue";
const HotTextScriptRef = ref(null);
// import FormworkSquareContent from "@/views/shotstack/CreationCenter/FormworkSquareContent.vue";
// const FormworkSquareContentRef = ref(null);

//文案库
import Textlibrary from "@/views/shotstack/AiCreation/Textlibrary.vue";

const emit = defineEmits(["getText:list", "importUse:item"]);

const props = defineProps({
  selectType: {
    type: String,
    default: "checkbox",
  },
});
// 获取文本list
const getText = (list) => {
  emit("getText", list);
};

const importUse = (item) => {
  emit("importUse", item);
};

const activeKey =ref('1')

const showModal = () => {
  dialog.value.showModal();
  activeKey.value = '1'
};

const closeModal = () => {
  dialog.value.closeModal();
};

// 文案库选择文案回调
const closeChooseMaterial = async (data) => {
  emit("importUse", {text: data[0].material_content});
};


defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <!-- contentWidth="1350px" -->
    <baseModel
      ref="dialog"
      contentWidth="1350px"
      :maskClosable="false"
      :zIndex="1002"
    >
      <template #title>
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="爆款文案导入" />
          <a-tab-pane key="2" tab="文案库"  />
        </a-tabs>
      </template>
      <template #content>
        <div class="content" v-if="activeKey=='1'">
          <!-- 可传checkbox(多选)  radio(单选)-->
          <HotTextScript
            ref="HotTextScriptRef"
            :isComponents="true"
            selectType="radio"
            :showTitleCart="false"
            @getText="getText"
            @importUse="importUse"
          ></HotTextScript>
          <!-- <FormworkSquareContent
            ref="FormworkSquareContentRef"
            :showTitleCart="false"
            :isSelect="true"
            :selectType="props.selectType"
            @getText="getText"
            @importUse="importUse"
          ></FormworkSquareContent> -->
        </div>
        <div v-else>
          <Textlibrary ref="copyLibraryModal" selectType="radio" :isComponents="true" @importSuccess="closeChooseMaterial" />
        </div>
      </template>
      <template #footer>
        <div class="bottom"></div>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
@fontColor: #1c1f23;

.content {
  // width: 1350px;
  height: 650px;
  overflow-y: auto;
}

.bottom {
  display: flex;
  justify-content: center;
}
</style>
